<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-form :inline="true" ref="searchForm" :model="searchObj" :rules="searchRules" label-width="80px">
        <el-form-item label="提交人" prop="submitter">
          <el-input placeholder="请输入" v-model.trim="searchObj.submitter">
          </el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker :editable='false' placeholder="请选择" type="date" v-model="searchObj.startTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker :editable='false' placeholder="请选择" v-model="searchObj.endTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="人员编号" prop="number">
          <el-input placeholder="请输入" v-model.trim="searchObj.number">
          </el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input placeholder="请输入" v-model.trim="searchObj.phone">
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary">搜索</el-button>
          <el-button type="primary" @click="doReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>


    <el-row>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <el-tree
            :data="treeData"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false">
          </el-tree>
        </div>
      </el-col>
      <el-col :span="20">
        <el-row class="mt-20 pl-10" type="flex" justify="start" :gutter="20">
          <el-button type="danger" :disabled="btnDisabled" @click="showComfirm">批量删除</el-button>
        </el-row>
        <el-table class="mt-20" :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="logNumber" label="日志编号">
          </el-table-column>
          <el-table-column prop="logName" label="日志名称">
          </el-table-column>
          <el-table-column prop="personNumber" label="人员编号">
          </el-table-column>
          <el-table-column prop="submitter" width="100" label="提交人">
          </el-table-column>
          <el-table-column prop="phone" label="手机号码">
          </el-table-column>
          <el-table-column prop="submitDate" label="提交日期">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="showDetail(scope.row.id)">查看</el-button>
              <el-button type="text" size="small" @click="showComfirm(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="mt-20" type="flex" justify="center">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes"
            :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </el-row>
      </el-col>
    </el-row>

    <el-dialog title="日志详情" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <el-row>
        <el-col :span="12">
          日志编号：{{detail.logNumber}}
        </el-col>
        <el-col :span="12">
          日志名称：{{detail.logName}}
        </el-col>
      </el-row>
      <el-row class="mt-20">
        <el-col :span="24">
          日志内容：{{detail.logContent}}
        </el-col>
      </el-row>
      <el-row class="mt-20">
        <el-col :span="12">
          提交人：{{detail.submitter}}
        </el-col>
        <el-col :span="12">
          发送给：{{detail.sendTo}}
        </el-col>
      </el-row>
      <el-row class="mt-20">
        <el-col :span="24">
          提交日期：{{detail.submitDate}}
        </el-col>
      </el-row>
      <el-row class="mt-20">
        <el-col :span="24">
          日志图片：<img :src="detail.submitDate">
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    workLogTableData,departManagementTreeData
  } from "@/constants/mockDatas";
  import {
    deleteConfirm
  } from "@/utils/deleteConfirm";
  import {
    requireInput,requireInputWithMaxLengthN,phoneNumInputN
  } from "@/utils/validateForm";

  export default {
    data() {
      const validateDate = (rule, value, callback) => {
        let num = new Date(this.searchObj.startTime).getTime() - new Date(this.searchObj.endTime).getTime();
        if (num > 0) {
            callback(new Error('开始时间不能超过结束时间'));
        } else if (value == "") {
            callback(new Error('请选择结束时间'));
        } else {
            callback();
        }
      };
      return {
        searchObj: {
          submitter: "",
          starTime: "",
          endTime: "",
          number: "",
          phone: ""
        },
        searchRules: {
          submitter: requireInputWithMaxLengthN(),
          startTime: [{validator: validateDate,trigger: 'change'}],
          endTime: [{validator: validateDate,trigger: 'change'}],
          number: requireInputWithMaxLengthN(),
          phone: [...phoneNumInputN,...requireInputWithMaxLengthN()],
        },
        treeData: departManagementTreeData,
        list: workLogTableData.data.rows,
        listLoading: false,
        currentPage: 1,
        total: 10,
        pageSize: 5,
        pageSizes: [5, 10],
        btnDisabled: true,
        multipleSelection: [],
        dialogVisible: false,
        rules: {
          title: requireInput("请输入标题"),
          content: requireInput("请输入内容")
        },
        detail: {
          "id": 1,
          "logNumber": "1542",
          "logName": "呵呵",
          logContent: '日志内容',
          "personNumber": "发过" ,
          "submitter": "提交人",
          sendTo: '朱莉',
          "phone": "13516264512",
          "submitDate": "2018-05-22 15:39:29",
          logImg: ''
        },
      };
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "gray",
          deleted: "danger"
        };
        return statusMap[status];
      }
    },
    created() {},
    methods: {
      doReset() {
        this.$refs.searchForm.resetFields(); //对整个表单进行重置
      },

      showDetail(id) {
        this.dialogVisible = true;
      },

      handleClose() {
        this.dialogVisible = false;
        this.form = {
          title: "",
          content: ""
        };
      },

      doDelete(id = null) {
        let ids = id || this.multipleSelection.map(item => item.id);
      },

      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },

      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },

      showComfirm(id = null) {
        deleteConfirm(this, this.doDelete);
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.btnDisabled = this.multipleSelection.length < 1;
      }
    }
  };

</script>
